<template>
    <v-dialog >
        <v-card>
            <v-card-title>
                {{ curLabel }}
            </v-card-title>

            <el-form :v-model="initialData" label-width="auto" >
            <el-scrollbar>

                <el-row class="row-bg" justify="space-evenly">
                    <el-form-item v-for="obj in formConfig"
                        :key="obj.label"
                        :label="obj.label"
                        :prop="obj.name" >

                        <!-- <el-col :span="20" > -->
                            <!-- 输入框 -->
                            <el-input  
                            v-if="obj.ktype === 'input'"
                            v-model="initialData[obj.name]"
                            :placeholder="obj.label"
                            :type="obj.ktype"
                            :style="obj.styleSet"
                            :required="obj.required"
                            :disabled="obj.disabled"
                            />

                            <!-- 文本域 -->
                            <el-input
                            v-if="obj.ktype ==='textarea'"
                            v-model="initialData[obj.name]"
                            :placeholder="obj.label"
                            :type="obj.ktype"
                            :style="obj.styleSet"
                            :required="obj.required"
                            :disabled="obj.disabled"
                            :autosize="{ minRows: 4 }"
                            />
                            
                            <!-- 下拉选项 -->
                            <el-select 
                            v-if="obj.ktype=='select'" 
                            v-model="initialData[obj.name]" 
                            :placeholder="obj.label"
                            :disabled="obj.disabled"
                            :style="obj.styleSet"
                            :required="obj.required"
                            >
                                <el-option
                                v-for="opt in obj.options"
                                :key="opt.value || opt"
                                :label="opt.label || opt"
                                :value="opt.value || opt"
                                />
                            </el-select>

                            <!-- 时间选取 -->
                            <el-date-picker
                            v-if="obj.ktype === 'datePicker'"
                            v-model="initialData[obj.name]"
                            :style="obj.styleSet"
                            :required="obj.required"
                            />

                            <!-- switch展示 -->
                            <el-switch 
                            v-if="obj.ktype==='switch'" 
                            v-model="initialData[obj.name]"
                            v-bind:is="true"
                            active-text="启用"
                            inactive-text="禁用"
                            :active-value="1"
                            :inactive-value="0"
                            :style="obj.styleSet"
                            :required="obj.required"
                            />
                        
                        <!-- </el-col> -->
                        <!-- {{ obj.options }} -->
                    </el-form-item>
                    
                </el-row>

                <el-row class="row-bg" justify="space-evenly">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button type="default" @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-row>

            </el-scrollbar>
            </el-form>

        </v-card>
    </v-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, onMounted,computed } from 'vue'
import { useStore } from 'vuex';
import { changeIsEdit, changeIsCreate } from '@/assets/js/common';


let store = useStore()
// 接收父组件传递过来的参数，用于渲染页面标题和表单内容
let props = defineProps({
    formConfig: { type: Object, default: () => {} },
    initialData: { type: Object, default: () => {} },
    title: { type: String }
})


// 存储提交后的数据
let saveData = ref({})
let curLabel = ref('')
let emit = defineEmits(['saveData', 'optCancel', 'optSave'])

// 组件挂载时，初始化组件数据
onMounted(() => {
    // 计算属性，用于动态设置标题
    curLabel.value = computed(() => {
        return props.title.toUpperCase() + ' / ' + store.getters.getCurLabel
    })
})

// 提交表单数据
function onSubmit() {
    try {
        
        // 如果用户为新增，需求移除id字段
        // if (!props.initialData.id) {
        //     delete saveData.value.id
        // }
        saveData.value = { ...props.initialData }

        console.log("进入更新逻辑", saveData);
        emit('optSave', saveData.value)
        changeIsEdit(false)
        changeIsCreate(false)
    } catch (error) {
        console.error('提交表单数据失败:', error)
        ElMessage.error('提交失败，请检查表单数据')
    }
    
}

// 取消提交
function onCancel() {
    emit('optCancel')
}

</script>

<style scoped>
.v-container {
    position: fixed;
    left: 12%;
    top: 130px;
    justify-content: center; 
}
.v-card-title {
    position: fixed;
    top: 35px;
    left: 20px;
    font-size: 18px;
    margin: -10px 0px 10px 20px;
    /* border: #ccc 0.3px solid; */
}

.el-form {
    margin: 75px 10px 10px 10px;
    /* border: 0.3px solid #ccc; */
}
.el-form-item{
    width: 75%;
    max-width: auto;
    min-height: 45px;
    max-height: auto;
}
.el-row {
    margin: 10px;
}

.el-scrollbar {
    position: fixed;
    overflow: hidden;
    height: 89%;
    margin: -10px 10px -10px 0;
    /* border: 1px solid #38725f; */
}
</style>